<template>
  <div class="pagination" v-if="isView !== 1">
    <a-config-provider :locale="locale">
      <a-pagination
        :show-size-changer="isShowPageNum !== 'no'"
        :current="currentPage"
        :pageSize="pageSize"
        :total="total"
        @showSizeChange="onShowSizeChange"
        :show-total="(total) => `共 ${total} 项`"
        :page-size-options="pageSizeOptions"
      />
    </a-config-provider>
  </div>
</template>

<script>
import zhCN from "ant-design-vue/es/locale/zh_CN";
export default {
  name: "ListPagination",
  inject: ["isShowPageNum", "isView"],
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      locale: zhCN,
      pageSizeOptions: ["1", "3", "5", "7", "9"],
    };
  },
  methods: {
    onShowSizeChange(page) {
      this.$emit("page-change", page);
    },
  },
};
</script>
<style scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  margin: 40px 0;
}
</style>
